<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>注册</h2>
    <div>
        <p>账号 <input type="text" id="accountNumber"></p>
        <p>邮箱 <input type="text" id="mailbox"></p>
        <p>密码<input type="password" id="password"></p>
        <p>确认密码 <input type="password" id="aencode"></p>
        <button id="register">注册</button>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script>
    let isValidEmail = false;
    //失去焦点邮箱
    $("#mailbox").on("blur", function () {
        let mailbox = $(this).val();
        if (!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(mailbox)) {
            layer.msg("邮箱格式非法")
            return;
        }


        //编码
        // mailbox = encode(mailbox);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let data = JSON.parse(this.responseText)
                let { code, message } = data;
                layer.msg(message);
                if (code === 20000) {
                    isValidEmail = true
                    layer.msg(message)
                } else {
                    isValidEmail = false;
                    layer.msg(message)
                }
            }
        }
        xhr.open("post", '/ajaxemail', true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        let formData = `user_mailbox=${mailbox}`
        xhr.send(formData)


    })


    //注册
    $('#register').on('click', function () {
        //获取值
        let mailbox = $("#mailbox").val()
        let accountNumber = $("#accountNumber").val()
        let password = $("#password").val()
        let aencode = $("#aencode").val()

        // 2 校验
        if ([mailbox, accountNumber, password, aencode].includes('')) {
            layer.msg('账号密码不能为空')
            return
        }
        if (!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(mailbox)) {
            layer.msg('邮箱格式非法')
            return;
        }
        if (password !== aencode) {
            layer.msg('请确认密码一致')
            return
        }
        mailbox = encode(mailbox);
        accountNumber = encode(accountNumber);
        password = encode(password);
        aencode = encode(aencode);

        //3  发送Ajax请求
        if (!isValidEmail) {
            layer.msg('邮箱不可用')

            return;
        }
        $(this).prop('disabled', true).html("注册中。。。");
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                $(this).prop('disabled', false).html("注册");

                let data = JSON.parse(this.responseText)
                let { code, message } = data;
                layer.msg(message);
                if (code === 20000) {
                    location.href = '/login'
                }

            }
        }
        xhr.open('post', '/ajaxregister', true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        //传到控制器的数据 
        let formData = `account_number=${accountNumber}&user_mailbox=${mailbox}&user_password=${password}&aencode=${aencode}`
        xhr.send(formData)
    })

    //对数据进行编码
    function encode(value) {
        return encodeURIComponent(value)
    }

</script>

</html>